<template>
	<div class="index">
		<el-container>
			<div :class="isBg==1?'header_box_bg1': isBg==2?'header_box_bg2':isBg==3?'header_box_bg3':'header_box_bg4'">
				
			  	<el-header>			  		
			  		<div class="header_index">
			  			<div class="header_logo">
			  				<img src="../assets/img/Weblogo.png">
			  			</div>
			  			<div class="header_nav">
			  				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"  unique-opened router >
									<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
									<el-submenu :index="index+''" v-if="!item.leaf">
										<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
										<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
									</el-submenu>
							
									<el-menu-item v-if="item.leaf" :index="index+''"><i :class="item.iconCls"></i>{{item.name}}</el-menu-item>
								</template>
							</el-menu>
			  			</div>
			  		</div>
			  		<div class="header_alt">
		  				<a href="">登录</a>
		  				<a href="">注册</a>		
			  		</div>		  	
			  	</el-header>
			  	
			</div>
		
		  	<el-main>		
				<div class="banner banner_big">
					<swiper :options="swiperOption" ref="mySwiper">
					<swiper-slide v-for="items in detail" >
						<div class="banner_index" @mouseenter="mouseover(items)" @mouseleave="mouseleave(items)">
							<!-- <img v-if="!items.back"  :src="items.imgs" alt="">
							<img class="img_back" v-if="items.back" :src="items.backimgs" alt=""> -->
							<img   :src="items.imgs" alt="">
							<img class="img_back" :src="items.backimgs" alt="">	
						</div>
					</swiper-slide>
					
					<div class="swiper-pagination" slot="pagination"></div>
					</swiper>
					<a id="swiper-button-prev" class="swiper-button-prev"></a>
					<a id="swiper-button-next" class="swiper-button-next"></a>
					<div class="jc"></div>
				</div>
				
				<el-tabs v-model="activeName"  @tab-click="handleClick">
				    <el-tab-pane v-for="(item,index) in tradingarea" :label="item.tradingname+'交易区'" :name="item.name">
				    	<el-table v-if="item.isOpen"  :data="list"   style="width: 100%">
						    <el-table-column   prop="currname"     :label="'币种对'+item.tradingname" >
						    </el-table-column>
						    <el-table-column   prop="price" label="价格" sortable>
						    </el-table-column>
						    <el-table-column   prop="dealnum" label="交易量">
						    </el-table-column>
					        <el-table-column   prop="pricetotal" label="总市值">
					        	<template slot-scope="scope">
					            	<span>￥{{scope.row.pricetotal}}	</span>				       
					        	</template>
						    </el-table-column>
					        <el-table-column   prop="dealnum" label="涨跌">
					        	<template slot-scope="scope">
					            	<span :class="scope.row.dealnum>0?'isRed':'isGreen'">{{scope.row.dealnum}}%	</span>				       
					        	</template>
						    </el-table-column>
						     <el-table-column   prop="trendmap" label="趋势图">
						    </el-table-column>
						    <el-table-column label="操作">
					            <template slot-scope="scope">					       
					              <span class="span_btn"  @click="handleDeal(scope.$index, scope.row)" >专业交易</span>				           
					             
					            </template>
				            </el-table-column>
					    </el-table>
					    <div v-if="!item.isOpen" class="notOpen">暂未开放，敬请期待</div>
				    </el-tab-pane>
				    <el-tab-pane label="考察区" name="seven">
				    	<el-table   :data="list"   style="width: 100%">
						    <el-table-column   prop="currname"     label="考察区" >
						    </el-table-column>
						    <el-table-column   prop="price" label="价格" sortable>
						    </el-table-column>
						    <el-table-column   prop="dealnum" label="交易量">
						    </el-table-column>
					        <el-table-column   prop="pricetotal" label="总市值">
					            <template slot-scope="scope">
					            	<span>H{{scope.row.pricetotal}}	</span>				       
					        	</template>
						    </el-table-column>
					        <el-table-column   prop="dealnum" label="涨跌">
						    </el-table-column>
						     <el-table-column   prop="trendmap" label="趋势图">
						    </el-table-column>
						    <el-table-column label="操作">
					            <template slot-scope="scope">					       
					              <span class="span_btn"  @click="handleDeal(scope.$index, scope.row)" >专业交易</span>				             
					            </template>
				            </el-table-column>
					    </el-table>
				    </el-tab-pane>				  
				</el-tabs>
				<div class="ad_area"></div>
				<div class="websit_notice">
					<div class="notice_title">
						<span class="notice_title_l">网站公告</span>
						<a class="notice_title_r" href="">
							<span >查看更多</span>
							<img src="../assets/img/more.png">
						</a>
					</div>
					<div class="notice_ul">
						<div class="notice_list" v-for="item in noticeData">
							<span class="notice_list_title"><a href="">{{item.noticetitle}}</a></span>
							<span class="notice_list_time">{{item.time}}</span>
						</div>
					</div>
				</div>
				<div class="link_index">
					<div class="banner banner_link">
						<swiper :options="swiperOption1" ref="mySwiper1">
						<swiper-slide v-for="items in detail1" >
							<div class="banner_index">
								<!-- <img v-if="!items.back"  :src="items.imgs" alt="">
								<img class="img_back" v-if="items.back" :src="items.backimgs" alt=""> -->
								<img   :src="items.imgs" alt="">
								<img class="img_back" :src="items.backimgs" alt="">	
							</div>
						</swiper-slide>
						
						</swiper>
						<a id="swiper-button-prev1" class="swiper-button-prev"></a>
						<a id="swiper-button-next1" class="swiper-button-next"></a>
						<div class="jc"></div>
					</div>
					<div class="banner banner_link">
						<swiper :options="swiperOption2" ref="mySwiper1">
						<swiper-slide v-for="items in detail1" >
							<div class="banner_index">						
								<img   :src="items.imgs" alt="">
								<img class="img_back" :src="items.backimgs" alt="">	
							</div>
						</swiper-slide>
						
						</swiper>
						<a id="swiper-button-prev2" class="swiper-button-prev"></a>
						<a id="swiper-button-next2" class="swiper-button-next"></a>
						<div class="jc"></div>
					</div>
				</div>
				<div class="volume">
					<div class="volume_item volume_hht">
						<span class="volume_num">526955.8816</span>
						<span class="volume_alt">24H HHT Volume</span>
					</div>
					<div class="volume_item volume_btc">
						<span class="volume_num">526955.8816</span>
						<span class="volume_alt">24H BTC Volume</span>
					</div>
					<div class="volume_item volume_eth">
						<span class="volume_num">526955.8816</span>
						<span class="volume_alt">24H ETH Volume</span>
					</div>
				</div>
				<!-- <div id="myChart" :style="{width: '300px', height: '300px'}"></div> -->
				 <schart :canvasId="canvasId"
		            :type="type"
		            :width="width"
		            :height="height"
		            :data="data"
		            :options="options"
		        ></schart>
		  	</el-main>
		  	<el-footer height="152">
		  		<!-- <div class="el-footer"> -->
		  		<div class="footer_box">
			  		<div class="footer_item">
			  			<div class="footer_item_title"><a href="">下载支持</a></div>
			  			<div class="footer_item_list">
			  				<span><a href="">API文档</a></span>
			  				<span><a href="">API下载</a></span>
			  			</div>
			  		</div>
			  		<div class="footer_item">
			  			<div class="footer_item_title"><a href="">客服服务</a></div>
			  			<div class="footer_item_list">
			  				<span><a href="">使用教程</a></span>
			  			</div>
			  		</div>
			  		<div class="footer_item">
			  			<div class="footer_item_title"><a href="">常见问题</a></div>
			  			<div class="footer_item_list">
			  				<span><a href="">服务协议</a></span>
			  			</div>
			  		</div>
			  		<div class="footer_item">
			  			<div class="footer_item_title"><a href="">本站公告</a></div>		  			
			  		</div>
			  		<div class="footer_item">
			  			<div class="footer_item_title"><a href="">联系我们</a></div>		  			
			  		</div>
		  		</div>
		  		<div class="copyright">hht.one 版权所有 @ 2018</div>
		  	<!-- </div> -->
		  	</el-footer>
		</el-container>
	</div>	
</template>
<script>
import Swiper from 'vue-awesome-swiper';
import Schart from 'vue-schart';
	export default {
		components:{
	        Schart
	    },
		data(){
			return {
			  	canvasId: 'myCanvas',
	            type: 'line',
	            width: 500,
	            height: 400,
	            data: [
	                {name: '2014', value: 1342},
	                {name: '2015', value: 2123},
	                {name: '2016', value: 1654},
	                {name: '2017', value: 1795},
	            ],
	            options: {
	                title: 'Total sales of stores in recent years'
	            },
				isBg:1,
				tradingarea:[
					{tradingname:"BTCX",name:'first',isOpen:true},
					{tradingname:"HHT",name:'second',isOpen:true},
					{tradingname:"BTC",name:'third',isOpen:true},
					{tradingname:"ETH",name:'fourth',isOpen:true},
					{tradingname:"USDT",name:'five',isOpen:true},
					{tradingname:"CET",name:'six',isOpen:false},
					],
				list:[
				{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'-0.17',trendmap:''},
				{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'0.87',trendmap:''},
				],
				swiperOption: {			
					// pagination : '.swiper-pagination',
					pagination: {
					    el: '.swiper-pagination',
				  	},
				  	navigation: {
						nextEl: '#swiper-button-next',
						prevEl: '#swiper-button-prev',
					},
   					paginationClickable :true,
					autoplay: true,
					slidesPerView: 3,
					slideToClickedSlide: true,
					autoplayDisableOnInteraction: false,
					loop: false,
					coverflow: {
					　　rotate: 30,
					　　stretch: 10,
					　　depth: 60,
					　　modifier: 2,
					　　slideShadows : true
				　　}
				},
				swiperOption1: {			
				  	navigation: {
						nextEl: '#swiper-button-next1',
						prevEl: '#swiper-button-prev1',
					},
   					paginationClickable :true,
					autoplay: true,
					slidesPerView: 5,
					slideToClickedSlide: true,
					autoplayDisableOnInteraction: false,
					loop: false,
					coverflow: {
					　　rotate: 30,
					　　stretch: 10,
					　　depth: 60,
					　　modifier: 2,
					　　slideShadows : true
				　　}
				},
				swiperOption2: {			
				  	navigation: {
						nextEl: '#swiper-button-next2',
						prevEl: '#swiper-button-prev2',
					},
   					paginationClickable :true,
					autoplay: true,
					slidesPerView: 5,
					slideToClickedSlide: true,
					autoplayDisableOnInteraction: false,
					loop: false,
					coverflow: {
					　　rotate: 30,
					　　stretch: 10,
					　　depth: 60,
					　　modifier: 2,
					　　slideShadows : true
				　　}
				},
				detail:[
				{imgs:require('../assets/img/item_banner1.jpg'),backimgs:require('../assets/img/item_banner1_back.jpg'),back:false,isBg:1},
				{imgs:require('../assets/img/item_banner2.jpg'),backimgs:require('../assets/img/item_banner2_back.jpg'),back:false,isBg:2},
				{imgs:require('../assets/img/item_banner3.jpg'),backimgs:require('../assets/img/item_banner3_back.jpg'),back:false,isBg:3},
				{imgs:require('../assets/img/item_banner4.jpg'),backimgs:require('../assets/img/item_banner4_back.jpg'),back:false,isBg:4},
				],
				detail1:[
				{imgs:require('../assets/link/beeseno.png')},
				{imgs:require('../assets/link/bikuai.png')},
				{imgs:require('../assets/link/bkex.png')},
				{imgs:require('../assets/link/capital.png')},
				{imgs:require('../assets/link/coin.png')},
				{imgs:require('../assets/link/fengniao.png')},
				{imgs:require('../assets/link/link_icon.png')},
				],
				noticeData:[
					{noticetitle:'公告标题1',time:'2018-01-10'},
					{noticetitle:'公告标题2',time:'2018-01-10'},
					{noticetitle:'公告标题3',time:'2018-01-10'},
				],
			   activeIndex:'0',
			   activeName: 'first',
			   mySwiper:'',
			}
		},
	    methods: {
    	 	drawLine(){
		        // 基于准备好的dom，初始化echarts实例
		        let myChart = this.$echarts.init(document.getElementById('myChart'))
		        // 绘制图表
		        myChart.setOption({
		            title: { text: '在Vue中使用echarts' },
		            tooltip: {},
		            xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [{
				        data: [820, 932, 901, 934, 1290, 1330, 1320],
				        type: 'line',
				        // areaStyle: {},
				     //    itemStyle:{
  							// normal: {
					    //         color: new this.$echarts.graphic.LinearGradient(
					    //             0, 0, 0, 1,
					    //             [
					    //                 {offset: 0, color: 'red'},
					    //                 {offset: 0.5, color: 'pink'},
					    //                 {offset: 1, color: '#ddd'}
					    //             ]
					    //         )
					    //     }
				     //    },
			          
				    }]
		          
		        });
		    },
		    handleDeal: function (index, row) {
		    },
	    	mouseleave(items){
	    		//小banner图鼠标离开时
	    		this.mySwiper.autoplay.start();
	    		items.back=false;

	    	},
	    	mouseover(items){
	    		this.mySwiper.autoplay.stop();
	    		items.back=true;
	    		this.isBg=items.isBg;
	    	},
	      	handleSelect(key, keyPath) {
	       	 	console.log(key, keyPath);
	      	},
	      	handleClick(tab, event) {
		        console.log(tab.index, event);
	        }
	    },
	    mounted () {  
			this.mySwiper=this.$refs.mySwiper.swiper;
			this.mySwiper1=this.$refs.mySwiper1.swiper;
			// this.drawLine();

		    // this.lunbo()  
		 /*   var mySwiper = new Swiper('.swiper-container', { 
			   autoplay: 2000,//可选选项，自动滑动 
			   slidesPerView: 3,

			    //分页器 
			   pagination : '.swiper-pagination', 
			   paginationClickable :true, 
			   observer: true
			}) */
		   /* setTimeout(function () {
		      this.swiperObj =  new Swiper('#swiper', {
		        loop: true,
		        pagination: '.swiper-pagination',
		        autoplay: true,
				slidesPerView: 3,

		        paginationClickable: true
		      });
		    }, 100)*/
		  },  
	}
</script>
<style>
.banner{height:250px;background: #fff;border-radius: 8px;/*padding:20px;*/position: relative;}
.banner_link{height: 124px;}
.img_back{
	    transform: rotateY(180deg);	
	    -webkit-transform: rotateY(180deg) translateZ(1px);
	    /*transform-origin: center center; */
}
.header_box_bg1{
	background: url("../assets/img/banner1.jpg");
    height: 710px;
    background-size: 100% auto;
}
.header_box_bg2{
	background: url("../assets/img/banner2.jpg");
    height: 710px;
    background-size: 100% auto;
}
.header_box_bg3{
	background: url("../assets/img/banner3.jpg");
    height: 710px;
    background-size: 100% auto;
}
.header_box_bg4{
	background: url("../assets/img/banner4.jpg");
    height: 710px;
    background-size: 100% auto;
}
.banner_big .swiper-wrapper{height:250px;}
.el-main{max-width:1200px;margin: -170px auto 0;background: #f5f4f9;padding:0;border-radius: 8px;}
.banner_index{height:124px;width:200px;margin:0 auto;position: relative;}
.banner_big .banner_index{
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 1.2s ease;
    transition: all 1.2s ease;
    
    height:200px;
    width:350px;
}
.banner_index img{position: absolute;top:0;left: 0;right:0;max-height: 100%;max-width: 100%;}
.banner_big .swiper-container .swiper-slide:hover .banner_index{
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    /*transform-origin: center center; */

}
.el-tabs{margin-top:20px;}
.ad_area{
    width: 100%;
    height: 200px;
    margin-top: 20px;
    background: url(../assets/img/adv_1.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
.websit_notice{
	margin-top:20px;
	background: #fff;
	padding:0 20px;
	min-height: 200px;
}
.notice_title{
    border-bottom: 1px solid #dcdcdc;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #1e2631;
    text-align: left;
}
.notice_title_r{float:right;font-size: 14px;    color: #999;text-decoration: none;}
.notice_title img{    vertical-align: middle;}
.notice_ul{display: flex;flex-flow: wrap;}
.notice_list{width:50%;display: flex;justify-content: space-between;padding:10px 20px; box-sizing: border-box;}
.notice_list_time{color:#999;}
.banner_big .swiper-container{padding:20px;height:100%;box-sizing: border-box;}
.swiper-button-prev,.swiper-button-next,.swiper-button-prev1,.swiper-button-next1{width:20px;height:30px; }
.swiper-button-prev,.swiper-button-prev1{
	   background: url('../assets/img/left-arrow.png') no-repeat;

}
.swiper-button-next,.swiper-button-next1{
	   background: url('../assets/img/right-arrow.png') no-repeat;
}
.link_index,.volume{margin-top:20px;}
.volume{
	background: #fff;
	display: flex;
	justify-content: space-around;
}
.volume_item{
	padding:0 73px;
	margin:89px 0;
    width: 33.33%;
}
.volume_item span{display: block;}
.volume_btc{border:2px solid #86acd0;border-width:0 2px 0 2px;}
.volume_num{    text-align: center;
    font-size: 18px;
    font-weight: 700;}
.volume_alt{    font-size: 12px;
    color: #999;
    margin-top: 10px;
    text-align: center;}
</style>